<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程训练</title>
</head>
<body>
    <div class="app-train">
        <!-- 上半部分 -->
        <div class="train-top dpflex fdcolumn">
            <video id="videoUrl" autoplay muted></video>
            <div class="top-text dpflex fdcolumn">
                <h3><span id="nowNum">3</span>/<span id="allNum">8</span></h3>
                <p class="title">胯关节环绕</p>
            </div>
        </div>
        <!-- 下半部分 -->
        <div class="train-bottom dpflex">
            <p id="progress"></p>
            <i class="iconfont icon-lastpage" id="lastPage"></i>
            <i class="iconfont icon-suspend" id="pause"></i>
            <i class="iconfont icon-nextpage" id="nextPage"></i>
        </div>
    </div>
    <!-- 蒙层 -->
    <div class="mask">
        <p>放弃可以找到一万个理由, 坚持只需要一个信念</p>
        <div class="player-box">
            <div class="button-box">
                <button id="startTrain">
                    <i class="iconfont icon-player"></i>
                    <span>开始训练</span>
                </button>
                <button id="stopTrain">
                    <i class="iconfont icon-end"></i>
                    <span>结束训练</span>
                </button>
            </div>
            <div class="course-desc">
                <img src="../imgs/advertisement-bg.jpg" alt="" width="130" height="100">
                <p>
                    <span>当前:</span>
                    <em>胯关节环绕</em>
                </p>
                
            </div>
        </div>
    </div>
</body>
</html>